require(['./config'], () => {
    require(['template', 'right_border', 'footer', 'header',], (template, right_border) => {
        class Cart {
            constructor() {
                this.init()
            }

            init () {
                let cartList = localStorage.getItem('cart')
                if(cartList) {
                    this.cartList = JSON.parse(cartList)
                    $('#shopping_car').html(template('srcShop', {cartList: this.cartList}))
                    //有数据的话就要默认计算一次总价
                    this.calcTotalMoney()
                    //给所有单选绑定事件
                    this.checksChange()
                    this.sum()
                    this.delete()
                } else {
                    //购物车没有数据
                    $('#cart-empty').show()
                }
            }

            calcTotalMoney() {
                $('#Paymoney').html(this.cartList.reduce((money, cart) => {
                    if(cart.check) money += cart.price * cart.num
                    return money
                }, 0).toFixed(2))
            }

            checksChange () {
                const _this = this
                $('#all-check').prop('checked', _this.cartList.every(cart => {
                    return cart.check
                  }))
                $('#all-check').on('change', () => {
                    $.each($('#shopping_car .shop_cont input:checkbox'), (index, item) => {
                        $('#shopping_car .shop_cont input:checkbox').eq(index).prop('checked', $('#all-check').prop('checked'))
                       _this.cartList.forEach( item => {
                            item.check = $('#all-check').prop('checked')
                        })
                        localStorage.setItem('cart', JSON.stringify(_this.cartList))
                        _this.calcTotalMoney()
                    })
                })
                // 给所有的单选按钮绑事件
                $('#shopping_car .shop_cont input:checkbox').on('change', function () {
                  // 取到当前商品的id
                  let id = $(this).parents('tr').attr('data-id')
                  // 根据id修改当前商品的选中状态
                  _this.cartList = _this.cartList.map(cart => {
                    if (cart.id == id) cart.check = $(this).prop('checked')
                    return cart
                  })
                  // 重新存localStorage
                  localStorage.setItem('cart', JSON.stringify(_this.cartList))
                  // 全选按钮根据数据是否全选来渲染状态
                  $('#all-check').prop('checked', _this.cartList.every(cart => {
                    return cart.check
                  }))
                  // 计算总价
                  _this.calcTotalMoney()
                })
              }

              //购买数量变化
            sum() {
                let _this = this
                //购买量加
                $('table').on('click', '#sum-jia', function () {
                    // 取到当前商品的id
                    let $tr = $(this).parents('tr')
                    let id = $(this).parents('tr').attr('data-id')
                    // 根据id修改当前商品的选中状态
                    $tr.find('#sum-num').val(`${parseInt($tr.find('#sum-num').val())+ 1}`)
                    _this.cartList = _this.cartList.map( item => {
                        if(item.id == id) {
                            item.num = $tr.find('#sum-num').val()
                        }
                        return item
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cartList))
                    right_border.getcarNum()
                    _this.init()

                } )

                //购买量减
                $('table').on('click', '#sum-jian', function () {
                    // 取到当前商品的id
                    let $tr = $(this).parents('tr')
                    let id = $(this).parents('tr').attr('data-id')
                    // 根据id修改当前商品的选中状态
                    let sum = parseInt($tr.find('#sum-num').val())
                    sum = sum - 1 === 0 ? 1 : (sum - 1)
                    $tr.find('#sum-num').val(sum)
                    _this.cartList = _this.cartList.map( item => {
                        if(item.id == id) {
                            item.num = $tr.find('#sum-num').val()
                        }
                         return item
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cartList))
                    right_border.getcarNum()
                    _this.init()
                } )

                //购买数量直接改数值
                $('table').on('blur', '#sum-num', function () {
                    // 取到当前商品的id
                    let $tr = $(this).parents('tr')
                    let id = $(this).parents('tr').attr('data-id')
                    // 根据id修改当前商品的选中状态
                    _this.cartList = _this.cartList.map( item => {
                        if(item.id == id) {
                            item.num = parseInt($tr.find('#sum-num').val())
                        }
                        return item
                    })
                    localStorage.setItem('cart', JSON.stringify(_this.cartList))
                    right_border.getcarNum()
                    _this.init()
                } )
            }

            //删除购物车
            delete() {
                let _this = this
                $('table').on('click', '#delete', function() {
                    let id = $(this).parents('tr').attr('data-id')
                    console.log(id)
                    _this.cartList = _this.cartList.filter((item, index) => {
                        if(item.id != id) {
                            return true
                        } else {
                            return false;
                        }
                    })
                    if(_this.cartList.length > 0) {
                        localStorage.setItem('cart', JSON.stringify(_this.cartList))
                        _this.init()
                    } else {
                        localStorage.removeItem('cart')
                        // _this.init()
                        location.reload()
                    }
                    right_border.getcarNum()
                })
            }
        }
        new Cart()
    })
})